<template>
  <div py-16rpx w-320rpx px-16rpx>
    <div class="coupon" flex flex-a-c>
      <div w-121rpx flex flex-a-c flex-j-c flex-col>
        <div text-25rpx font-bold :style="{ color: colors.themeColor }">
          <div v-if="props.res.couponType !== 'DISCOUNT'">
            <span text-24rpx font-bold>￥</span>
            {{ props.res.price || 0 }}
          </div>
          <div v-if="props.res.couponType === 'DISCOUNT'">
            {{ props.res.couponDiscount || 0 }}
            <span text-24rpx font-bold>折</span>
          </div>
        </div>
      </div>
      <div>
        <div w-199rpx flex-j-c flex @click="pickupCoupon">
          <div flex flex-col>
            <div text-center mb-10rpx text-24rpx>立即领取</div>
            <div text-center text-24rpx text-dark-color>
              <div text-24rpx mt-5rpx :style="{ color: colors.themeColor }">
                满{{ props.res.consumeThreshold }}元可用
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <nut-toast ref="toastRef" />
  </div>
</template>

<script setup lang="ts">
import { colors } from '@/constants/injection-key'
import { forceLogin } from '@/utils/filters'
import { receiveCoupons } from '@/api/promotion'
import type { ToastInst } from 'nutui-uniapp'
const toastRef = ref<ToastInst>() // toast
const props = defineProps<{
  res: any
}>()

async function pickupCoupon() {
  forceLogin()
  try {
    toastRef.value?.showToast.loading('领取中...')
    const res = await receiveCoupons(props.res.id)
    toastRef.value?.hideToast()
    if (res.data.success) {
      uni.showToast({
        icon: 'none',
        duration: 3000,
        title: '领取成功！'
      })
    }
  } catch (error) {
    toastRef.value?.hideToast()
  }
}
</script>

<style scoped lang="scss">
.coupon {
  height: 100rpx;
  background: #fff;
  -webkit-mask-image:
    radial-gradient(circle at 121rpx 10rpx, transparent 10rpx, red 6rpx),
    linear-gradient(transparent 25%, red 0, red 75%, transparent 0);
  -webkit-mask-size:
    100%,
    4rpx 16rpx;
  -webkit-mask-repeat: repeat, repeat-y;
  -webkit-mask-position:
    0 -10rpx,
    121rpx;
  -webkit-mask-composite: source-out;
  mask-composite: subtract;
}
</style>
